<template>
  <div class="plugin-option__inner">
    <em-cell-group
      v-if="options"
      title="样式设置"
    >
      <em-cell
        v-if="ratioHeight!==false"
        title="宽高比例"
        :label="ratio"
        title-horizontal
        center
        :border="false"
      >
        <div class="params-input">
          <el-input
            v-model="ratioHeight"
            placeholder="高度（像素）"
          >
            <template slot="prepend">750 * </template>
          </el-input>
        </div>
      </em-cell>
      <em-cell
        v-if="options.radius!==undefined"
        title="圆角"
        :label="options.radius"
        title-horizontal
        center
        :border="false"
      >
        <el-radio-group
          v-model="options.radius"
          class="radio-radius"
        >
          <el-radio-button
            v-for="(r,index) in radius"
            :key="'r-'+index"
            :label="r.value"
          >
            <em-icon :name="r.icon" />
          </el-radio-button>
        </el-radio-group>
      </em-cell>
      <em-cell
        v-if="background"
        title="背景颜色"
        title-horizontal
        center
        :border="false"
      >
        <el-radio-group
          v-model="options.background"
          class="radio-color"
        >
          <el-radio-button
            v-for="color in colors"
            :key="'cl-'+color.name"
            :label="color.name"
          >
            <em-color-block
              :color="color.color"
              radius="5px"
              square
              size="small"
            />
          </el-radio-button>
          <image-picker
            v-model="bgImage"
            size="small"
          />
        </el-radio-group>
      </em-cell>
    </em-cell-group>
  </div>
</template>

<script>
import ImagePicker from '@/components/ImagePicker'
import { BG_COLORS } from '@/utils/styles'
export default {
  name: 'StyleOption',
  components: {
    ImagePicker
  },
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      minHeight: 80,
      customBgimage: '',
      backgroundImage: {
        thumb: ''
      },
      colors: BG_COLORS,
      radius: [
        {
          value: 0,
          icon: 'em-icon-squre'
        },
        {
          value: 5,
          icon: 'em-icon-fillet'
        }
      ]
    }
  },
  computed: {
    options: {
      get() {
        return this.value
      },
      set(v) {
        this.value = v
      }
    },
    ratioHeight: {
      get() {
        if (this.value && this.value.height !== undefined) {
          var height = this.value.height || 0
          if (!/^\d+$/.test(height)) {
            height = Number(height.replace(/[^0-9]/gi, ''))
          }
          return height
        }
        if (this.value && this.value.ratio !== undefined) {
          if (this.value.ratio) {
            return (750 / this.value.ratio).toFixed(0)
          }
        }
        return false
      },
      set(v) {
        this.value.height = Number(v)
      }
    },
    ratio() {
      if (!this.ratioHeight) {
        return null
      }
      var dd = this.countDivior(750, this.ratioHeight)
      var width = 750 / dd
      var height = this.ratioHeight / dd
      return `${width}:${height}`
    },
    background() {
      if (this.options && this.options.background) {
        return this.options.background
      }
      return null
    },
    bgImage: {
      get() {
        var bg = this.background
        var bgimage = this.colors.find(item => {
          return item.name === bg
        })
        if (bgimage) {
          return ''
        }
        return this.background
      },
      set(v) {
        this.options.background = v
      }
    }
  },
  mounted() {
    this.options = this.value
  },
  methods: {
    countDivior(a, b) {
      if (b === 0) {
        return a
      } else {
        return this.countDivior(b, a % b)
      }
    }
  }
}
</script>
<style lang="scss">
.params-input {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  font-size: 0;
  .el-input-group {
    .el-input__inner {
      width: 75px;
      text-align: center;
    }
  }
}
</style>
